<template>
  <view class="point-table">
    <view class="legend flexr align-center">
      <view class="legend-item flexr align-center">
        <view class="legend-icon">
          <view class="legend-line"></view>
          <view class="legend-circle"></view>
        </view>
        <view class="legend-name text-color2"> 配镜 球镜(SPH) </view>
      </view>
      <view class="legend-item flexr align-center">
        <view class="legend-icon">
          <view class="legend-line second"></view>
          <view class="legend-circle second"></view>
        </view>
        <view class="legend-name text-color2"> 配镜 柱镜(CYL) </view>
      </view>
      <view class="legend-item flexr align-center">
        <view class="legend-icon">
          <view class="legend-line third"></view>
          <view class="legend-circle third"></view>
        </view>
        <view class="legend-name text-color2"> 屈光度 (等效球镜) </view>
      </view>
    </view>

    <view class="table" id="table">
      <view
        class="table-line flexr align-center"
        v-for="(item, index) in 5"
        :key="index"
      >
        <view class="line-number">{{ item - 6 }}</view>
        <view class="line flex-1"></view>
      </view>
      <view class="table-line x-axis flexr align-center">
        <view class="line-number">0</view>
        <view class="line flex-1">
          <view class="left-line"></view>
          <view class="right-line"></view>
        </view>
      </view>
      <view
        class="table-point"
        v-for="(p, index) in degreeList"
        :key="index"
        :style="{ bottom: p.bottom, left: p.left }"
      ></view>
      <view
        class="table-point Astigmatism"
        v-for="(p, index) in AstigmatismList"
        :key="index"
        :style="{ bottom: p.bottom, left: p.left }"
      ></view>
      <view
        class="table-point Diopter"
        v-for="(p, index) in DiopterList"
        :key="index"
        :style="{ bottom: p.bottom, left: p.left }"
      ></view>
    </view>

    <view class="axis-label flexr align-center">
      <view class="unit">度数</view>
      <view class="bottom-axis flex-1">
        <view
          class="text-center date"
          v-for="(item, index) in data"
          :style="{
            left: getDateLeft(index),
            rotate: data.length > 1 ? '-10deg' : '0deg',
          }"
          :key="item.createTime"
        >
          {{ item.createTime }}
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useUserStore } from "@/store/user";
import { ref, onMounted, computed, getCurrentInstance } from "vue";
const props = defineProps({
  data: Array,
});
const instance = getCurrentInstance();
const query = uni.createSelectorQuery().in(instance.proxy);
const userStore = useUserStore();
const pointSize = (24 / 750) * uni.getSystemInfoSync().windowWidth;
const dateSize = (350 / 750) * uni.getSystemInfoSync().windowWidth;
const tablePaddingVertical = (30 / 750) * uni.getSystemInfoSync().windowWidth;
const tablePaddingLeft = (54 / 750) * uni.getSystemInfoSync().windowWidth;
const height = ref(0);
const width = ref(0);
onMounted(() => {
  query
    .select("#table")
    .boundingClientRect((data) => {
      console.log("得到布局位置信息" + JSON.stringify(data));
      console.log("节点离页面顶部的距离为" + data.top);
      height.value = data.height;
      width.value = data.width;
    })
    .exec();
});
function getBottom(value) {
  return `${
    (-parseFloat(value) / 5) * (height.value - tablePaddingVertical * 2) +
    tablePaddingVertical -
    pointSize / 2
  }px`;
}
function getLeft(index) {
  return `${
    ((index + 1) / (props.data.length + 1)) * (width.value - tablePaddingLeft) +
    tablePaddingLeft -
    pointSize / 2
  }px`;
}
function getDateLeft(index) {
  return `${
    ((index + 1) / (props.data.length + 1)) * (width.value - tablePaddingLeft) -
    dateSize / 2
  }px`;
}
const degreeList = computed(() => {
  return props.data.map((item, index) => {
    return {
      bottom: getBottom(item.degree),
      left: getLeft(index),
    };
  });
});
const AstigmatismList = computed(() => {
  return props.data.map((item, index) => {
    return {
      bottom: getBottom(item.Astigmatism),
      left: getLeft(index),
    };
  });
});
const DiopterList = computed(() => {
  return props.data.map((item, index) => {
    return {
      bottom: getBottom(item.Diopter),
      left: getLeft(index),
    };
  });
});
</script>

<style lang="scss">
.point-table {
  // height: 536rpx;
  // min-height: 536rpx;
  padding: 28rpx;
  box-sizing: border-box;
  .legend {
    justify-content: space-between;
    margin-bottom: 20rpx;
    .legend-icon {
      position: relative;
      // width: 24rpx;
      height: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .legend-line {
      width: 36rpx;
      height: 4rpx;
      min-height: 4rpx;
      background-color: rgba(52, 76, 194, 1);
      &.second {
        background-color: #36bba5;
      }
      &.third {
        background-color: #eebe66;
      }
    }
    .legend-circle {
      width: 24rpx;
      height: 24rpx;
      border: 4rpx solid rgba(52, 76, 194, 1);
      border-radius: 12rpx;
      box-sizing: border-box;
      background-color: white;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      &.second {
        border-color: #36bba5;
      }
      &.third {
        border-color: #eebe66;
      }
    }
    .legend-name {
      font-size: 20rpx;
      margin-left: 10rpx;
    }
  }

  .table {
    position: relative;
    .table-line {
      height: 60rpx;
      min-height: 60rpx;
      .line-number {
        font-size: 24rpx;
        width: 34rpx;
        height: 34rpx;
        padding-right: 20rpx;
        text-align: center;
        line-height: 34rpx;
        color: $text-color2;
      }
      .line {
        height: 2rpx;
        box-sizing: border-box;
        border-top: 2rpx dashed #dadada;
      }
    }
    .x-axis {
      .line {
        position: relative;
        border-top: 2rpx solid $text-color5;
        .left-line {
          width: 2rpx;
          height: 20rpx;
          background-color: $text-color5;
        }
        .right-line {
          width: 2rpx;
          height: 20rpx;
          background-color: $text-color5;
          position: absolute;
          right: 0;
          top: 0;
        }
      }
    }
    .table-point {
      width: 24rpx;
      height: 24rpx;
      background-color: rgba(52, 76, 194, 1);
      position: absolute;
      border-radius: 12rpx;
      &.Astigmatism {
        background-color: #36bba5;
      }
      &.Diopter {
        background-color: #eebe66;
      }
    }
  }
  .axis-label {
    color: $text-color2;
    margin-top: 20rpx;
    font-size: 24rpx;
    .unit {
      width: 54rpx;
      padding-right: 0rpx;
    }
    .bottom-axis {
      justify-content: center;
      height: 50rpx;
      position: relative;
      .date {
        width: 350rpx;
        position: absolute;
        line-height: 50rpx;
        top: 0;
        bottom: 0;
      }
    }
  }
}
</style>